<template>
  <div>
    <div class="cards">
      <!-- 卡片列表 -->
      <Card v-for="recommend in recommendContent" :key="recommend.id" :data="recommend"></Card>
      <el-button size="large" style="padding: 0 40px" @click="getRecommendInfo(++pageNum)">加载更多</el-button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import Card from '@/components/Card/index.vue';
import { onMounted, ref } from 'vue';
import { getRecommendListInfo } from '@/api/home';


const pageSize = ref(20); // 每页条数
const pageNum = ref(0); // 当前页
const localCache = ref(0);
const recommendContent = ref<any[]>([]); // 保存推荐的数据列表

// 获取推荐列表数据
const getRecommendInfo = async (pageNum: number) => {
  try {
    const { data } = await getRecommendListInfo(pageSize.value, pageNum, localCache.value);
    // 向数组中累加推荐数据对象
    recommendContent.value.push(...data.content);
  } catch (error) {
    console.error(error);
  }
}

// 挂载页面之后获取推荐列表数据
onMounted(() => {
  getRecommendInfo(0);
});

</script>

<style lang="less" scoped>
  .cards {
    overflow: hidden;
    .el-button {
      display: block;
      margin: 0 auto;
    }
    .card:nth-child(5n) {
      margin-right: 0;
    }
  }
</style>